<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 漫展接单小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow-md">
        <div class="max-w-screen-xl mx-auto px-4 py-3 flex items-center">
            <button onclick="history.back()" class="mr-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            <div class="text-xl font-bold text-gray-800">我的订单</div>
        </div>
    </div>

    <!-- 标签栏 -->
    <div class="bg-white mb-4 sticky top-0 z-10">
        <div class="flex border-b">
            <button class="flex-1 py-3 text-center text-purple-600 border-b-2 border-purple-600 font-medium">全部</button>
            <button class="flex-1 py-3 text-center text-gray-600">待拍摄</button>
            <button class="flex-1 py-3 text-center text-gray-600">进行中</button>
            <button class="flex-1 py-3 text-center text-gray-600">已完成</button>
        </div>
    </div>

    <!-- 订单列表 -->
    <div class="px-4 space-y-4 mb-4">
        <!-- 订单1 - 待拍摄 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center mb-2">
                    <div class="font-medium">小明摄影</div>
                    <div class="text-sm text-orange-500">待拍摄</div>
                </div>
                <div class="text-sm text-gray-500">订单号：20231125001</div>
            </div>
            <div class="flex p-4">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="摄影师头像" class="w-20 h-20 object-cover rounded mr-3">
                <div class="flex-1">
                    <div class="font-medium text-gray-800">基础套餐</div>
                    <div class="text-sm text-gray-600 mt-1">30张精修照片，拍摄时间1小时</div>
                    <div class="text-sm text-gray-600 mt-1">预约时间：2023-11-25 上午</div>
                </div>
            </div>
            <div class="flex justify-between items-center p-4 bg-gray-50">
                <div class="text-sm text-gray-600">实付款：<span class="text-purple-600 font-medium">¥199</span></div>
                <div class="flex space-x-2">
                    <button class="px-4 py-1 border border-gray-300 rounded text-sm text-gray-600">取消预约</button>
                    <button class="px-4 py-1 bg-purple-600 text-white rounded text-sm">联系摄影师</button>
                </div>
            </div>
        </div>

        <!-- 订单2 - 进行中 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center mb-2">
                    <div class="font-medium">小蓝摄影</div>
                    <div class="text-sm text-blue-500">进行中</div>
                </div>
                <div class="text-sm text-gray-500">订单号：20231124002</div>
            </div>
            <div class="flex p-4">
                <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="摄影师头像" class="w-20 h-20 object-cover rounded mr-3">
                <div class="flex-1">
                    <div class="font-medium text-gray-800">高级套餐</div>
                    <div class="text-sm text-gray-600 mt-1">50张精修照片，拍摄时间2小时</div>
                    <div class="text-sm text-gray-600 mt-1">预约时间：2023-11-24 下午</div>
                </div>
            </div>
            <div class="flex justify-between items-center p-4 bg-gray-50">
                <div class="text-sm text-gray-600">实付款：<span class="text-purple-600 font-medium">¥299</span></div>
                <div class="flex space-x-2">
                    <button class="px-4 py-1 border border-gray-300 rounded text-sm text-gray-600">查看进度</button>
                    <button class="px-4 py-1 bg-purple-600 text-white rounded text-sm">联系摄影师</button>
                </div>
            </div>
        </div>

        <!-- 订单3 - 已完成 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="p-4 border-b border-gray-100">
                <div class="flex justify-between items-center mb-2">
                    <div class="font-medium">小红摄影</div>
                    <div class="text-sm text-green-500">已完成</div>
                </div>
                <div class="text-sm text-gray-500">订单号：20231120003</div>
            </div>
            <div class="flex p-4">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="摄影师头像" class="w-20 h-20 object-cover rounded mr-3">
                <div class="flex-1">
                    <div class="font-medium text-gray-800">豪华套餐</div>
                    <div class="text-sm text-gray-600 mt-1">80张精修照片，拍摄时间3小时，赠送精美相册</div>
                    <div class="text-sm text-gray-600 mt-1">预约时间：2023-11-20 全天</div>
                </div>
            </div>
            <div class="flex justify-between items-center p-4 bg-gray-50">
                <div class="text-sm text-gray-600">实付款：<span class="text-purple-600 font-medium">¥499</span></div>
                <div class="flex space-x-2">
                    <button class="px-4 py-1 border border-gray-300 rounded text-sm text-gray-600">查看照片</button>
                    <button class="px-4 py-1 bg-purple-600 text-white rounded text-sm">评价</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-md border-t border-gray-200">
        <div class="flex justify-around">
            <a href="home.html" class="flex flex-col items-center py-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                <span class="text-xs text-gray-500">首页</span>
            </a>
            <a href="orders.html" class="flex flex-col items-center py-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                </svg>
                <span class="text-xs text-purple-600">订单</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center py-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span class="text-xs text-gray-500">我的</span>
            </a>
        </div>
    </div>

    <!-- 底部占位，防止内容被固定底栏遮挡 -->
    <div class="h-16"></div>
</body>
</html>